<template>
	<view class="u-flex-col" style="height :calc(100vh - 44px)">
		<jmy-find-artison
		    button_text="立即免费预约工长" 
			flow_chat="https://img.aibbyp.com/wechat/images/artison/tabbar.png" 
			detail_img ="https://img.aibbyp.com/wechat/images/artison/bgs.png"
			:worker_type_id="type"
			>
			<template v-slot:top>
				<view :class="bannerStyle"></view>
				
				<view style="margin: -76rpx 40rpx 20rpx 40rpx; background-color: #ffffff;border-radius: 10rpx;padding-bottom: 0;" class="padding bg-white" >
				<view style="display: flex;flex-direction: row;justify-content: center;margin-top: -5px">
					<view v-for="(value,key) in typeList" :class="type==value.id?'click':'noclick'" @click="clickType(value.id)" style="margin-right: 20rpx;">
						{{value.name}}
					</view>
				</view>
				</view>
				
				
				
			</template>
		</jmy-find-artison>
	</view>
</template>

<script>
	import FindArtison from "@/components/jmy-find-artison/jmy-find-artison.vue"
	export default {
		data() {
			return {
				type: 1,
				bannerStyle: "banner",
				address:'',
				typeList:[]
			}
		},
		methods: {
			clickType(type) {
				this.type = type
			},
			getWorkerType(){
				this.$api.get({
					url: '/jmy/worker_type/getListByType?type=1',
					success: res => {
						this.typeList=res
						for(let i=0;i<res.length;i++){
							if(i===0){
								this.type=res[i].id;
							}
						}
					}
				});
			}
		},
		components:{
			FindArtison
		},
		onLoad() {
			this.getWorkerType();
				uni.$emit('colour',true)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: rgb(245, 245, 245);

	}

	.content {
		padding: 0px 4% 20px 4%;
	}

	.banner {
		background-image: url("https://img.aibbyp.com/wechat/images/artison/gongzhang.png");
		width: 100%;
		height: 500upx;
		background-position: right bottom, left top;
		background-repeat: repeat;
		background-size: cover;
	}
	.detail {
		padding: 5%;
		background-color: #FFFFFF;
		border-radius: 10px;
	
	}
	.add-task {
		width: 100%;
		height: 600upx;
		background-color: green;
		border-radius: 10px;
	}
	.noclick {
		width: 35%;
		padding: 20rpx;
		border: 1px solid #E5E5E5;
		border-radius: 10rpx;
		height: 80upx;
		font-size: 13px;
		opacity: 1;
		text-align: center;
	}

	.click {
		width: 35%;
		padding: 20rpx;
		font-size: 30rpx;
		border: 1rpx solid #FF8E81;
		border-radius: 10rpx;
		color: red;
		height: 80upx;
		font-size: 13px;
		opacity: 1;
		text-align: center;
		font-weight: bold;
		background: #FFECEA url("https://img.aibbyp.com/wechat/images/artison/ok.png") no-repeat right bottom -2px;

	}
</style>